﻿@model VehicleManagement.Models.Track

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Details</title>
        <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
        <script type="text/javascript">
            var opts = {
  width : 250,     // 信息窗口宽度
  height: 100,     // 信息窗口高度
  title : "Hello"  // 信息窗口标题
}

            function loadScript() {
                var script = document.createElement("script");
                script.src = "http://api.map.baidu.com/api?v=1.3&callback=initialize";
                document.body.appendChild(script);
            }


            function addPolyline(points, map) {
                var polyline = new BMap.Polyline(points, {
                    strokeColor: "blue",
                    strokeWeight: 6,
                    strokeOpacity: 0.5
                });
                map.addOverlay(polyline);
            }

            function initialize() {
                var map = new BMap.Map('map');
                map.enableScrollWheelZoom();
                map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl());
                map.addControl(new BMap.OverviewMapControl());
//                addMarker(map, new BMap.Point(121.491, 31.233), 0);
//                addMarker(map, new BMap.Point(121.461, 31.232), 1);
                var points = new Array();
                $.post("/Track/Points",{
                    id:@Model.TrackID
                },function (data) {
                    $.each(data, function () {
                        points.push(new BMap.Point(this.Longitude,this.Latitude));
                        addMarker(map, new BMap.Point(this.Longitude,this.Latitude), 0);
                    });
                    addPolyline(points, map);
                    if(points.length != 0){
                        map.centerAndZoom(points[0], 11);
                    }
                    else{
                        map.centerAndZoom(new BMap.Point(116.491, 39.233), 11);
                    }
                });
                //var points = [new BMap.Point(121.491, 31.233), new BMap.Point(121.461, 31.232)];
                
            }

            function addMarker(map, point, index) {
                var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
                new BMap.Size(22, 25), {
                    offset: new BMap.Size(10, 25),
                    imageOffset: new BMap.Size(0, 0 - index * 25)
                });
                var marker = new BMap.Marker(point, { icon: myIcon });
                map.addOverlay(marker);
            }
            window.onload = loadScript; 
    </script>
</head>
<body>
    <div>
        <div id="map" style="width: 800px; height: 450px"></div>
        <div>
            @Html.LabelFor(model => model.DriverName):
            @Html.DisplayFor(model => model.DriverName)
        </div>

        <div>
            @Html.LabelFor(model => model.CarNumber):
            @Html.DisplayFor(model => model.CarNumber)
        </div>

        <div>
            @Html.LabelFor(model => model.Beginning):
            @Html.DisplayFor(model => model.Beginning)
        </div>

        <div>
            @Html.LabelFor(model => model.Destination):
            @Html.DisplayFor(model => model.Destination)
        </div>

        <div>
            @Html.LabelFor(model => model.TimeCost):
            @Html.DisplayFor(model => model.TimeCost)
        </div>
    </div>
</body>
</html>
